@import '../../styles/vars';

.x-btn {
  padding: 0.375rem 0.8rem;
  font-size: 1rem;
  line-height: 1.5;
  border: 0;
  border-radius: 4px;

  &:hover {
    cursor: pointer;
  }
}

.x-btn-default {
  background-color: $color-default;
  color: $color-font-dark;
  &:hover {
    background-color: $color-default-6;
  }
}

.x-btn-primary {
  background-color: $color-primary;
  color: $color-font-light;
  &:hover {
    background-color: $color-primary-6;
  }
}

.x-btn-info {
  background-color: $color-info;
  color: $color-font-light;
  &:hover {
    background-color: $color-info-6;
  }
}

.x-btn-success {
  background-color: $color-success;
  color: $color-font-light;
  &:hover {
    background-color: $color-success-6;
  }
}

.x-btn-danger {
  background-color: $color-danger;
  color: $color-font-light;
  &:hover {
    background-color: $color-danger-6;
  }
}

.x-btn-warning {
  background-color: $color-warning;
  color: $color-font-light;
  &:hover {
    background-color: $color-warning-6;
  }
}

.x-btn-bili {
  background-color: $color-bili;
  color: $color-font-light;
  &:hover {
    background-color: $color-bili-6;
  }
}

.x-btn-small {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.x-btn-large {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
}

.x-btn-round {
  border-radius: 1.5rem;
}
